function Villager(){
    document.querySelector('button.NavigationBtn.mark[this]').removeAttribute('this');
    document.querySelector('button.NavigationBtn.mark#Villager').toggleAttribute('this');
    const children = document.querySelector('div#Frame').children;
    for (var i = 0; i < children.length; i++){
        if (children[i].id != 'nohide'){
            children[i].classList.add('hide');
        }
    };
    document.querySelector('div#Frame div#Villager').classList.remove('hide');
    closeMenu();
    initVillagerInterface();
}

function generateCard(imgSrc, title, desc, iClass, iText) {
    const cardDiv = document.createElement('div');
    cardDiv.className = 'card';
    //
    const img = document.createElement('img');
    img.src = imgSrc;
    cardDiv.appendChild(img);
    //
    const contentDiv = document.createElement('div');
    contentDiv.className = 'content';
    cardDiv.appendChild(contentDiv);
    //
    const titleH2 = document.createElement('h2');
    titleH2.className = 'vCardTitle';
    titleH2.innerText = title;
    contentDiv.appendChild(titleH2);
    //
    const descSpan = document.createElement('span');
    descSpan.className = 'vCardDesc';
    descSpan.innerText = desc;
    contentDiv.appendChild(descSpan);
    //
    const iElement = document.createElement('i');
    iElement.className = iClass;
    iElement.innerText = iText;
    descSpan.appendChild(iElement);
    //
    return cardDiv;
}

function initVillagerInterface(){
    const Columns = document.querySelectorAll('div#v.aColomn');
    // Clear
    Columns.forEach(function(column) {
        const cards = column.querySelectorAll('.card');
        cards.forEach(function(card) {
            column.removeChild(card);
        });
    });
    // Put
    for(var u = 0; u < Columns.length; u++){
        var frame = Columns[u]
        var name_imgSrc = villager_Name_ImgSrc[u]
        var desc = villager_Desc[u]
        var iClass = villager_iClass[u]
        var iText = villager_iText[u]
        for(let v = 0; v < 24; v++){
            if(!desc == ''){
                if(iText[v] == ''){
                    var descc = desc[v]
                } else {
                    var descc = `${desc[v]} | `
                }
                try{
                    if(!descc.toString().indexOf('undefined') == -1 || (descc == ' | ' && descc.length == 3)){
                        descc = ''
                    }
                } catch { descc = '' }
            } else {
                var descc = ''
            }
            if(!iText == ''){
                var iTextt = iText[v]
                try{
                    if(!iTextt.toString().indexOf('undefined') == -1 || (iText == ' | ' && iText.length == 3)){
                        iTextt = ''
                    }
                } catch { iTextt = '' }
            } else {
                var iTextt = ''
            }
            const card = generateCard(
                `assets/images/villager/${name_imgSrc[v]}.png`,
                `L${u+1} #${v+1} ${name_imgSrc[v]}`,
                descc,
                {0:'w', 1:'g', 2:'r'}[iClass[v]],
                iTextt
            )
            frame.appendChild(card);
        }
    }
    frame = null, name_imgSrc = null, desc = null, iClass = null, iText = null;
}

initVillagerInterface();
